export default {
    navigation: [
        {
            label: "折线图",
            nav: [
                {
                    label: "折线图",
                    option: {
                        title: {
                            text: "折线图",
                            textAlign: "auto"
                        },
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }]
                    }
                },
                {
                    label: "折线平滑图",
                    option: {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            smooth: true
                        }]
                    }
                },
                {
                    label: "折线图堆叠",
                    option: {
                        title: {
                            text: '折线图堆叠'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '邮件营销',
                                type: 'line',
                                stack: '总量',
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '联盟广告',
                                type: 'line',
                                stack: '总量',
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: '视频广告',
                                type: 'line',
                                stack: '1',
                                data: [150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name: '直接访问',
                                type: 'line',
                                stack: '总1量',
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: '搜索引擎',
                                type: 'line',
                                stack: '2',
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    }
                },
                {
                    label: "折线堆叠",
                    option: {
                        title: {
                            text: '堆叠区域图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis:{
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '邮件营销',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '联盟广告',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: '视频广告',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name: '直接访问',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: '搜索引擎',
                                type: 'line',
                                stack: '总量',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    }
                },
                {
                    label: "对比折线",
                    option: {
                        title: {
                            text: '未来一周气温变化',
                            subtext: '纯属虚构'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['最高气温', '最低气温']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        },
                        series: [
                            {
                                name: '最高气温',
                                type: 'line',
                                data: [10, 11, 13, 11, 12, 12, 9],
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name: '最低气温',
                                type: 'line',
                                data: [1, -2, 2, 5, 3, 2, 0],
                                markPoint: {
                                    data: [
                                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: '最大值'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            }
                        ]
                    }
                }
            ]
        },
        {
            label: "柱状图",
            nav: [
                {
                    label: "顶顶顶顶",
                    option: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'bar',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: '邮件营销',
                                type: 'bar',
                                stack: '广告',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '联盟广告',
                                type: 'bar',
                                stack: '广告',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name: '视频广告',
                                type: 'bar',
                                stack: '广告',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [150, 232, 201, 154, 190, 330, 410]
                            },
                            {
                                name: '搜索引擎',
                                type: 'bar',
                                data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                                emphasis: {
                                    focus: 'series'
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'dashed'
                                    },
                                    data: [
                                        [{type: 'min'}, {type: 'max'}]
                                    ]
                                }
                            },
                            {
                                name: '百度',
                                type: 'bar',
                                barWidth: 5,
                                stack: '搜索引擎',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [620, 732, 701, 734, 1090, 1130, 1120]
                            },
                            {
                                name: '谷歌',
                                type: 'bar',
                                stack: '搜索引擎',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [120, 132, 101, 134, 290, 230, 220]
                            },
                            {
                                name: '必应',
                                type: 'bar',
                                stack: '搜索引擎',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [60, 72, 71, 74, 190, 130, 110]
                            },
                            {
                                name: '其他',
                                type: 'bar',
                                stack: '搜索引擎',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [62, 82, 91, 84, 109, 110, 120]
                            }
                        ]
                    }
                },
            ]
        }
    ],
    option: {
        title: { 
            text: '默认标题',
            textStyle: {
                color: "#333"
            }
        },
    },
    previewXml: (v)=>{
        let value = JSON.parse(JSON.stringify(v));
        let legend = (value.legend && value.legend.data) ? JSON.stringify(value.legend.data) : `[]`;
        if(value.legend && value.legend.data){
            value.legend.data = `legend`;
        }

        let xAxis = null;
        if(value.xAxis){
            if(value.xAxis instanceof Array){

            }else{
                xAxis = value.xAxis.data ? JSON.stringify(value.xAxis.data) : '[]';
            }
        }
        if(value.xAxis && value.xAxis.data){
            value.xAxis.data = `xAxis`;
        }

        let yAxis = (value.yAxis && value.yAxis.data) ? JSON.stringify(value.yAxis.data) : '[]';
        if(value.yAxis && value.yAxis.data){
            value.yAxis.data = `yAxis`;
        }

        let xml = `
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id='$id' style="width:$widthpx;height:$heightpx"></div>
        
        <script type="text/javascript">
        var $id_dom = document.getElementById('$id');
        var myChart = echarts.init($id_dom);

        var legend = $legend || ${legend};
        var xAxis = $xAxis || ${xAxis};
        var yAxis = $yAxis || ${yAxis};

        option = ${JSON.stringify(value)};
        
        if (option && typeof option === "object") {
          var startTime = +new Date();
          myChart.setOption(option, true);
          var endTime = +new Date();
          var updateTime = endTime - startTime;
          console.log("Time used:", updateTime);
        }   
        </script>`
        
        xml = xml.replace(/\$id/g, "${id}")
        .replace(/\$width/g, "${width}")
        .replace(/\$height/g, "${height}")
        .replace(/\$legend/g, "${legend}")
        .replace(/"legend"/g, 'legend')
        .replace(/\$xAxis/g, "${xAxis}")
        .replace(/"xAxis"/g, 'xAxis')
        .replace(/\$yAxis/g, "${yAxis}")
        .replace(/"yAxis"/g, 'yAxis');
        console.log(xml);
        return xml;
    },
};
